<template>
  <div class="hot">
    <div class="hot-title">
      <img class="hot-img" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
      <span class="hot-txt">本周热门榜单</span>
      <a class="hot-more" href="#">全部榜单<span class="iconfont more-icon">&#xe64a;</span></a>
    </div>
    <ul class="hot-list">
      <li class="hot-item" v-for="item of hotList" :key="item.id">
        <a class="full-link" href="#">
          <div class="hot-rank" v-if="item.rankUrl"><img :src="item.rankUrl" alt=""></div>
          <div class="hot-pic"><img :src="item.imgUrl" alt=""></div>
          <div class="hot-txt">{{item.desc}}</div>
          <div class="hot-price"><span>&yen;{{item.price}}</span>起</div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeHot',
  props: {
    hotList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles"
  .hot
    height 4rem
    margin-top .2rem
    background #fff
    .hot-title
      position: relative
      padding .24rem 0 .26rem
      .hot-img
        display inline-block
        width .3rem
        height .3rem
        margin-left .24rem
        vertical-align top
      .hot-txt
        display inline-block
        font-size .32rem
        color $txtColor
        height: .44rem
        line-height .44rem
      .hot-more
        position: absolute
        top .36rem
        right: .32rem
        color #616161
        .more-icon
          font-size .24rem
    .hot-list
      padding 0 .24rem
      overflow-x scroll
      white-space nowrap
      .hot-item
        position: relative
        display inline-block
        width 2rem
        margin-left .12rem
        padding .06rem 0 .2rem
        .full-link
          display inline-block
          width 100%
          .hot-rank
            position: absolute
            top -.06rem
            left 0
            width .84rem
            height .4rem
          .hot-rank > img
            width 100%
          .hot-pic
            width 2rem
            height 0
            overflow hidden
            padding-bottom 100%
          .hot-pic > img
            width 100%
          .hot-txt
            color $txtColor
            text-align center
            font-size .24rem
            margin-top .12rem
            line-height .32rem
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .hot-price
            text-align: center
            color #616161
            line-height .36rem
          .hot-price > span
            font-size .28rem
            color #ff8300
</style>
